<template>
  <div class="ly-box ly-bill-info">
    <h1 class="wyjf-title">账单信息</h1>

    <yd-cell-group title="房间信息">
      <yd-cell-item arrow>
        <div slot="left">{{name}}</div>
        <div slot="right">
          <select v-model="roomId" @change="getBill(roomId)">
            <!--<option value="">请选择房间</option>-->
            <option :key="index" v-for="(item,index) in roomList" :value="item.id">
              {{item.groupName}}{{item.building}}{{item.room}}
            </option>
          </select>
        </div>
      </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group title="账单列表">
      <yd-accordion>
        <yd-accordion-item class="bill-item" v-for="(item,index) in bill.list" :key="index"
                           @click.native="showInfo(item.housingId,item.billIdStr)">
          <div slot="title" class="title">
            <div class="left">账期&nbsp;{{item.accountPeriod||"--"}}</div>
            <div class="right">{{item.sumAmount||"--"}}元</div>
          </div>

          <div class="infoList">
            <div class="info-tips"></div>
            <div class="info-item" v-for="(info,index) in infoList" :key="index">
              <div class="left">{{info.costTypeName}}</div>
              <div class="right">{{info.amount}}元</div>
            </div>
          </div>
        </yd-accordion-item>
      </yd-accordion>
    </yd-cell-group>

    <yd-cell-group>
      <yd-cell-item>
        <span slot="left">应付金额：</span>
        <div slot="right">{{bill.sumAmount}}元</div>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" type="primary" class="wyjf-btn" @click.native="handlePay">付款</yd-button>

    <div class="tools-btn">
      <span class="tl-item" @click="goHistory()">缴费记录</span>
      <span class="tl-item" @click="goRecharge()">预存费用</span>
    </div>


  </div>
</template>

<script>
  import http from "../../http";
  import SlipDel from 'vue-slip-delete';
  import storage from "../../store/storage.js";
  import wx from "weixin-js-sdk"

  export default {
    components: {
      SlipDel
    },
    data() {
      return {
        housingId: null,
        roomId: '',
        roomList: [],
        bill: {},
        name: '',
        infoList: [],
      };
    },
    created: function () {
      this.init();
    },
    methods: {
      init: function () {

        //判断路由是否带参

        if (this.$route.query.housingId) {
          this.housingId = this.$route.query.housingId
          http.get("/communityApps/propertyPay/rooms?housingId=" + this.$route.query.housingId).then(res => {
            if (res.data.code == 20000) {
              if (res.data.data.roomList.length <= 0) {
                this.$dialog.toast({
                  mes: '暂无房间，请先绑定房间信息',
                  timeout: 1500,
                  icon: 'error',
                  callback: () => {
                    this.$router.push({path: '/user/addRoom'});
                  }
                });
              } else {
                this.name = "房间";
                this.roomList = res.data.data.roomList;
                this.roomId = res.data.data.roomList[0].id;
                this.getBill(this.roomId);
              }
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        } else {
          this.getBillCommunity();
        }

      },


      getBillCommunity: function () {

        const housingId = storage.getObj("housingId").id;
        this.housingId = housingId
        this.name = storage.getObj("housingId").name;
        http.get("/communityApps/propertyPay/rooms?housingId=" + housingId).then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.roomList.length <= 0) {
              this.$dialog.toast({
                mes: '暂无房间，请先绑定房间信息',
                timeout: 1500,
                icon: 'error',
                callback: () => {
                  this.$router.push({path: '/user/addRoom'});
                }
              });
            } else {
              this.roomList = res.data.data.roomList;
              this.roomId = res.data.data.roomList[0].id;
              this.getBill(res.data.data.roomList[0].id);
            }
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });

      },


      showInfo: function (housingId, billIds) {
        const params = {
          housingId: housingId,
          billIds: billIds,
        };
        http.post("/communityApps/propertyPay/getBillInfo", params).then(res => {
          if (res.data.code == 20000) {
            this.infoList = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });

      },


      getBill: function (roomId) {
        //清空数据 主要是清空折叠面板信息
        this.bill = [];
        this.$dialog.loading.open('数据加载中...');
        http.get("/communityApps/propertyPay/bills?roomId=" + roomId).then(res => {
          this.$dialog.loading.close();
          if (res.data.code == 20000) {
            this.bill = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      handlePay: function () {
        const params = {
          billId: this.bill.billIds,
          amount: this.bill.amount,
          roomId: this.roomId,
        };

        http.post("/communityApps/propertyPay/payBill", params).then(res => {
          if (res.data.code == 20000) {
            //支付宝支付
            if (window.AlipayJSBridge) {

              AlipayJSBridge.call("tradePay", {
                tradeNO: res.data.data.trade_no,
                function: (result) => {
                  // 支付成功后的回调函数
                  this.$dialog.toast({
                    mes: '支付成功',
                    timeout: 1500,
                    icon: 'success',
                    callback: () => {
                      this.$router.push("/");
                    }
                  });
                },
              });

            } else {
              // 微信支付
              wx.chooseWXPay({
                timestamp: res.data.data.timestamp,// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: res.data.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.data.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.data.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.data.data.paySign, // 支付签名
                success: () => {
                  // 支付成功后的回调函数
                  this.$dialog.toast({
                    mes: '支付成功',
                    timeout: 1500,
                    icon: 'success',
                    callback: () => {
                      location.reload()
                      // this.$router.push("/propertyPay/roomList");
                      // this.$dialog.alert({mes: '给你一次重来的机会！'});
                    }
                  });

                }
              });
            }

          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      // 支付记录
      goHistory: function () {
        this.$router.push({path: '/propertyPay/history', query: {roomId: this.roomId, housingId: this.housingId}});
      },

      //预存费用
      goRecharge: function () {
        http.get("/communityApps/propertyPay/getPreCost?roomId=" + this.roomId).then(res => {
          if (res.data.code == 20000) {
            this.$router.push({path: '/propertyPay/recharge', query: {roomId: this.roomId,}});
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },


    }
  };
</script>

<style lang="scss">
  .ly-bill-info {
    .bill-item {
      background: #fff;
      border-bottom: 1px solid #eee;
    }
    .yd-accordion-title {
      span {
        width: 100%;
        height: auto;
      }
    }
    .title {
      display: flex;
      .left {
        flex: 1;
      }
      .right {
        padding-right: 0.1rem;
      }
    }
  }


</style>

<style scoped lang="scss">
  .wyjf-title {
    font-size: 0.48rem;
    font-weight: normal;
    color: #04be02;
    text-align: center;
    line-height: 1rem;
  }

  .wyjf-btn {
    width: 86%;
    margin: 0 auto;
  }

  .infoList {
    width: 100%;
    height: auto;
    padding: 0.2rem;
    border-top: 1px solid #eee;
    .info-item {
      width: 100%;
      display: flex;
      color: #666;
      line-height: 0.8rem;
      .left {
        flex: 1;
      }
    }
  }

  .tools-btn {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    margin-top: 0.2rem;
    .tl-item {
      color: #54d0dd;
      padding-right: 0.1rem;
      border-right: 1px solid #54d0dd;
    }
    .tl-item:last-child {
      border: none;
    }
  }


</style>
